<template>
  <div class="goods">
    <good-nav />
    <good-swiper :banners="banners" />
    <good-content :content="content"/>
    <good-tab :user="user"/>
  </div>
</template>

<script>
import GoodContent from './GoodContent.vue';
import GoodNav from "./GoodNav.vue";
import GoodSwiper from "./GoodSwiper.vue";
import GoodTab from './GoodTab.vue';

export default {
  components: { GoodSwiper, GoodNav, GoodContent, GoodTab },
  name: "",
  data() {
    return {
      banners: [],
      content:{},
      user:{}
    };
  },
  computed: {
  },
  activated() {
    this.get_info();
  },
  methods: {
    get_info() {
      let gid = this.$route.params.gid
      console.log(gid);
      this.$axios({
        url: "mall/detail",
        params: {
          gid: gid
        }
      }).then(res => {
        this.banners = res.data.banners;
        this.content = {
          address:res.data.address,
          goodinfo:res.data.goodinfo,
          price:res.data.price,
          goodname:res.data.goodname
        }
        this.user=res.data.user
        console.log(res);
      });
    }
  },
  destroyed(){
    console.log('被销毁')
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goods img {
  width: 100%;
}
</style>
